<template>
  <div className="_wz_semicircleCharts">
    <div :id="props.charData.id" style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch
} from 'vue'
import {useRouter, useRoute} from "vue-router";


import {useMainStore} from '../../../store'  //pinia 使用 类似 vuex
import {storeToRefs} from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import * as echartsGL from 'echarts-gl' // 引入echarts


//reactive
export default defineComponent({
  name: 'semicircleCharts',//组件名称
  components: {},//组件引用
  props:['charData'],
  setup(props, context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $echarts = inject('$echarts');//引用echarts
    const $common = inject('$common');//自己封装的方法

    const state = reactive({});


    //监听
    watch(() => props.charData,(news, old) => {
      nextTick(()=>{
        loadData()
      })
    },{deep: true});



    // charData


    //页面初始化加载数据
    const loadData = () => {
      var chartDom = document.getElementById(props.charData.id);
      state.chartsYu = $echarts.init(chartDom);


      let data1 = props.charData.value  //最大100
      let getvalue = data1;// / 100 * 180

      let aa = (180 / 100 * Number(getvalue)).toFixed(2);
      let option = {
        grid: {
          top:10,
          left: 10,
          right: 10,
          bottom: 10,
          containLabel: true
        },
        title: {
          text: getvalue + (!!props.charData.unit ? props.charData.unit : '%'),
          textStyle: {
            color: props.charData.fontColor,
            fontSize: 20,
            fontFamily:'Barlow-Medium1',
          },
          subtext: props.charData.name,
          subtextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          itemGap: 10,
          left: 'center',
          top: '33%',

        },
        angleAxis: {
          // 起始角度，180 也可以是 225
          startAngle: 180,
          max: 360,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false

          },
          axisTick: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: '180%', //图形大小
        },
        series: [
          {
            type: 'bar',
            z: 2,
            // 数值
            data: [aa],
            showBackground: true,
            backgroundStyle: {
              color: 'transparent',
            },
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 10,
            barGap: '-100%',
            itemStyle: {
              normal: {
                opacity: 1,
                color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: props.charData.lineColor[0]
                  }, {
                    offset: 1,
                    color: props.charData.lineColor[1]
                  }]),
                shadowBlur: 5,
                shadowColor: props.charData.lineColor[2]
              }
            }
          },
          {
            type: 'bar',
            z: 1,
            // 需要的圆环跨度大小，可以是180,270等
            data: [180],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 10,
            barGap: '-100%',
            itemStyle: {
              normal: {
                opacity: 1,
                color: props.charData.lineColor[3],
              }
            }
          },
        ],
      }


      state.chartsYu.setOption(option);
      // state.chartsYu.resize();

    }


    // 其他的生命周期
    onBeforeMount(() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted(() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData();//页面初始化加载数据
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate(() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated(() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount(() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted(() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      props,
    }
  }
})


</script>
<style scoped lang="less">
._wz_semicircleCharts {
  width: 100%;
  height: 100%;
}
</style>
